<!-- yaml展示组件 -->
<script setup>
import { ref, onUpdated, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import CodeMirror from './CodeMirror.vue'
import { createOrUpdateByYamlHandler as createHandler } from '../../api/tools.js'

const props = defineProps({
    clusterId: {
        type: String
    },
    namespace: {
        type: String
    },
    yamlContent: {
        type: String
    },
    showDialog: {
        type: Boolean,
        default: false
    },
    showDialogFooter: {
        type: Boolean,
        default: true
    }
})
const emits = defineEmits(['closeDialogHandler'])

const visible = computed({
    get() {
        return props.showDialog
    },
    set(val) {
        console.log("执行了修改操作", val)
        emits('closeDialogHandler', val)
    }
})
const yamlData = ref('')
onUpdated(() => {
    yamlData.value = props.yamlContent
})

const updateByYaml = () => { //yaml文件更新事件
    // console.log("当前数据", yamlData.value)
    if (yamlData.value == '') {
        ElMessage.error("请输入yaml数据")
        return
    }else {
        ElMessageBox.confirm(
            `你确定要更新${props.namespace}的数据吗?`,
            {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }
        ).then(() => {
            const postData = {
                clusterId: props.clusterId,
                namespace: props.namespace,
                yaml: yamlData.value,
                method: 'Update'
            }
            // 创建资源或更新资源
            createHandler(postData).then((res) => {
            ElMessageBox.confirm(
                res.data.message.replace("\n","<br/>"),
                '更新成功',
                {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'success',
                    showCancelButton: false, // 关闭取消按钮
                    draggable: true, // 支持拖拽
                    dangerouslyUseHTMLString: true // 支持HTML字符串
                }
            ).then(() => {
                location.reload()
            })
            }).catch(() => {
                return
            })
        }).catch(() => {
            return
        })
    }
}
</script>

<template>
  <el-dialog
    draggable
    destroy-on-close
    v-model="visible"
    center
    width="70%">
      <template #header="{titleId,titleClass}">
        <div class="my-header">
          <div :id="titleId" :class="titleClass">
            <el-button type="primary" size="large" title="资源所在集群">
                <i class="iconfont icon-k8s" style="font-size: 20px"/>
                <span style="font-size: 20px;margin-left: 10px;">{{ props.clusterId }}</span>
            </el-button>
            <el-button v-if="props.namespace !=''" type="primary" size="large" title="资源所在空间">
                <i class="iconfont icon-k8s" style="font-size: 20px"/>
                <span style="font-size: 20px;margin-left: 10px;">{{ props.namespace }}</span>
            </el-button>
          </div>
        </div>
      </template>
      <CodeMirror v-model="yamlData" height="600px"></CodeMirror>
      <template #footer>
        <div v-if="props.showDialogFooter">
            <el-button type="warning" @click="updateByYaml()">更新</el-button>
        </div>
      </template>
  </el-dialog>
</template>

<style scoped>
</style>
